<template>
  <div>
    <el-table
      :data="dataList"
      border
      v-loading="dataLoading"
      style="width: 100%;background: #ffffff;">
      <el-table-column label="序号" type="index" width="55" align="center"/>
      <!--<el-table-column-->
        <!--prop="orderId"-->
        <!--align="center"-->
        <!--width="120"-->
        <!--label=订单编号>-->
      <!--</el-table-column>-->
      <el-table-column
        prop="orderMember"
        align="center"
        width="100"
        label=订单用户>
      </el-table-column>
      <el-table-column
        prop="orderCardNumber"
        align="center"
        width="120"
        label="红旗会员卡号">
      </el-table-column>
      <el-table-column
        align="center"
        width="100"
        label=订单状态>
      <template slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 1 && scope.row.commentStatus === 1">未接单</el-tag>
        <el-tag size="mini" v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 2 && scope.row.commentStatus === 1">已接单</el-tag>
        <el-tag size="mini"v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 3 && scope.row.serviceStatus === 4 && scope.row.commentStatus === 1">待付款</el-tag>
        <el-tag size="mini" v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 2 && scope.row.serviceStatus === 4 && scope.row.commentStatus === 1">未评价</el-tag>
        <el-tag size="mini" v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 2 && scope.row.commentStatus === 2">已评价</el-tag>
        <el-tag size="mini" v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 3 && scope.row.commentStatus === 1">二次服务</el-tag>
        <el-tag size="mini" v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 1 && scope.row.serviceStatus === 5 && scope.row.commentStatus === 1">无需付款</el-tag>
        <el-tag size="mini" v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 2 && scope.row.serviceStatus === 4 && scope.row.commentStatus === 2">已完成</el-tag>
        <el-tag size="mini" v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 1 && scope.row.serviceStatus === 1 && scope.row.commentStatus === 1">已取消</el-tag>
      </template>
      <!--        <template slot-scope="scope">-->
      <!--        <el-tag>{{getStatus(scope.row)}}</el-tag>-->
      <!--      </template>-->
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="payStatus"-->
      <!--        align="center"-->
      <!--        label=支付状态>-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag v-if="scope.row.payStatus == 1">未付款</el-tag>-->
<!--          <el-tag v-if="scope.row.payStatus == 2">已付款</el-tag>-->
<!--          <el-tag v-if="scope.row.payStatus == 3">待付款</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="serviceStatus"-->
<!--        align="center"-->
<!--        label='服务（配送）状态'>-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag v-if="scope.row.serviceStatus === 1">待接单</el-tag>-->
<!--          <el-tag v-if="scope.row.serviceStatus === 2">已接单,正在配送</el-tag>-->
<!--          <el-tag v-if="scope.row.serviceStatus === 3">二次配送</el-tag>-->
<!--            <el-tag v-if="scope.row.serviceStatus === 4">配送完成</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="commentStatus"-->
<!--        align="center"-->
<!--        label=评论状态>-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag v-if="scope.row.commentStatus === 1">未评论</el-tag>-->
<!--          <el-tag v-if="scope.row.commentStatus === 2">已评论</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="deName"
        align="center"
        width="80"
        label=配送员>
      </el-table-column>
      <el-table-column
        prop="orderAddress"
        align="center"
        width="100"
        label=订单地址>
        <template slot-scope="scope">
<!--          <label :alt="scope.row.orderAddress">{{scope.row.orderAddress}}</label>-->
          <el-tooltip class="item" effect="dark" :content="scope.row.orderAddress" placement="top">
            <el-tag size="mini">订单地址</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="endReason"-->
<!--        align="center"-->
<!--        width="100"-->
<!--        label=无法维修原因>-->
<!--        <template slot-scope="scope">-->
<!--          &lt;!&ndash;          <label :alt="scope.row.orderAddress">{{scope.row.orderAddress}}</label>&ndash;&gt;-->
<!--          <el-tooltip class="item" effect="dark" :content="scope.row.endReason" placement="top">-->
<!--            <el-tag size="mini">原因</el-tag>-->
<!--          </el-tooltip>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="orderAmount"
        align="center"
        width="80"
        label=订单金额>
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label=所属店铺>
      </el-table-column>
      <el-table-column
        prop="payAmount"
        align="center"
        width="80"
        label=支付金额>
      </el-table-column>
      <el-table-column
        prop="buyerRemake"
        align="center"
        width="100"
        label=买家备注>
        <template slot-scope="scope">
          <!--          <label :alt="scope.row.orderAddress">{{scope.row.orderAddress}}</label>-->
          <el-tooltip class="item" effect="dark" :content="scope.row.buyerRemake" placement="top">
            <el-tag size="mini">备注</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderMobile"
        align="center"
        width="120"
        label=联系方式>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detailHandle
                (scope.row.orderId)">查看</el-button>
          <el-button  type="text" size="small"
                      v-if="scope.row.orderStatus==1&&scope.row.payStatus==1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1"
                     @click="addOrUpdateHandle(scope.row.orderId)">编辑
          </el-button>
          <el-button  type="text" size="small" v-if="scope.row.commentStatus == 2"
                      @click="evaluate(scope.row.orderId)">查看评价
          </el-button>
<!--          <el-button v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==1&&scope.row.commentStatus==1" type="text" size="small"-->
<!--                     @click="modify(scope.row)">改派</el-button>-->
<!--          <el-button v-if="scope.row.orderStatus==1&&scope.row.payStatus===1&&scope.row.serviceStatus==2&&scope.row.commentStatus==1" type="text" size="small"-->
<!--                     @click="modify(scope.row.orderId,scope.row.merTypeId)">改派</el-button>-->
          <el-button v-if="scope.row.orderStatus == 1 && scope.row.payStatus == 1 && scope.row.serviceStatus == 2&&scope.row.commentStatus==1"  type="text" size="small"
                     @click="distribute(scope.row.orderId,scope.row.shopId)">人工派单</el-button>
          <el-button v-if="scope.row.orderStatus == 2 && scope.row.payStatus == 2 && scope.row.serviceStatus == 4&&scope.row.commentStatus==2"
            type="text" size="small" @click="deleteHandle(scope.row.orderId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"
                   @refreshDataList="refurbish"></add-or-update>
    <!--弹窗，查看订单-->
    <detail v-if="detailVisible" ref="detail"
            @refreshDataList="refurbish"></detail>
    <!--弹窗，改派-->
    <modify v-if="modifyVisible" ref="modify"
            @refreshDataList="refurbish"></modify>
    <!--查看评价-->
    <evaluate v-if="evaluateVisible" ref="evaluate"
                @refreshDataList="refurbish"></evaluate>
    <!--弹窗，人工派单-->
    <distribute v-if="distributeVisible" ref="distribute"
            @refreshDataList="refurbish" @handlerAssignmentOrder="handlerAssignmentOrder"></distribute>
  </div>
</template>

<script>
  import {delObj} from '@/api/order/order'
  import AddOrUpdate from '@/views/modules/order/order/nideshoporder-add-or-update'
  import detail from '@/views/modules/order/order/nideshoporderdetail'
  import modify from '@/views/modules/order/order/nideshopmodify'
  import distribute from '@/views/modules/order/order/nideshopdistribute'
  import evaluate from '@/views/modules/order/order/nideshopevaluate'
  export default {
    data(){
      return {
        dataListSelections: [],
        addOrUpdateVisible: false,
        modifyVisible: false,
        isShowPay: false,
        detailVisible: false,
        evaluateVisible:false,
        distributeVisible:false,
      }
    },
    props: {
      dataList: {
        type: Array
      },
      dataLoading:{
          type: Boolean
      }
    },
    components: {
      AddOrUpdate,
      detail,
      modify,
      evaluate,
      distribute
    },
    methods: {
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      //查看评价
      evaluate (orderId) {
        this.evaluateVisible = true
        this.$nextTick(() => {
          this.$refs.evaluate.init(orderId)
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      //改派
      modify(row){
        this.modifyVisible = true
        this.$nextTick(() => {
          this.$refs.modify.init(row.orderId,row.merTypeId,row.shopId)
        })
      },
      //查看详情
      detailHandle(id){
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.detail.init(id)
        })
      },
      //人工派单
      distribute(id,shopId){
        this.distributeVisible = true
        this.$nextTick(() => {
          this.$refs.distribute.init(id,shopId)
        })
      },
      // 删除
      deleteHandle (orderId) {
        this.$confirm(`确定删除`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          const params = new FormData()
          params.append('orderId',orderId)
          delObj(params).then(res => {
            if (res.data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
              })
              this.$emit('refreshDataList')
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      refurbish(){
        this.$emit('refreshDataList')
      },
      handlerAssignmentOrder() {
        this.$emit('refreshDataList')
      },
      getStatus(item){
        if(item.orderStatus == 1){
          if(item.type == 4){
            if(item.payStatus == 1){
              return '待接单'
            }
          }
          if(item.serviceStatus == 1){
            return '待接单'
          }else if(item.serviceStatus == 2){
            return '已接单,正在配送'
          }else if(item.serviceStatus == 3){
            return '二次服务'
          }else if(item.serviceStatus == 4){
            if(item.payStatus == 3){
              return '待付款'
            }
          }else{
            return '已完成'
          }
        }else if(item.orderStatus == 2){
          if(item.payStatus == 1 && item.serviceStatus == 1 && item.commentStatus ==1){
            return '已取消'
          }else {
            return '已完成'
          }
        }
      },
    }
  }
</script>
